<template>
  <div v-if="dataState.type === 'ing'" overflow-y-auto h-screen>
    <div p-t-5 p-l-5 text-main text=" gray-700 dark:gray-200">
      {{ dataState.roomData.roomNum }} 房间
    </div>
    <van-divider
      :style="{
        color: isDark ? '#E5E7EB' : '#394150',
        borderColor: isDark ? '#E5E7EB' : '#394150',
        padding: '0 16px',
      }"
    >
      {{ dataState.roomData.startData }} 开局
    </van-divider>

    <div v-if="!loading" pb-10px style="margin-top: -10px">
      {{ roomText }}
    </div>
    <div flex justify-between mb-2>
      <div style="width: 40%">
        玩家
      </div>
      <div v-if="isHomeowner" style="width: 30%">
        总得分 / 胜/负
      </div>
      <div v-else>
        胜/负
      </div>
      <div v-if="isHomeowner" style="width: 30%">
        计分操作
      </div>
      <div v-else style="width: 30%">
        总得分
      </div>
    </div>
    <div v-for="v in dataState.playerData" :key="v.id" flex justify-between items-center mt-4>
      <div style="width: 40%" flex justify-center>
        <AvatarComponent :data-state="dataState" :item="v" />
      </div>
      <div v-if="isHomeowner" id="van-popover" style="width: 30%" text-score>
        {{ v.score ? v.score : 0 }} - {{ v.win ? v.win : 0 }}/{{ v.fail ? v.fail : 0 }}
      </div>
      <!-- 胜/负 -->
      <div v-else style="width: 30%" text-score>
        {{ v.win ? v.win : 0 }}/{{ v.fail ? v.fail : 0 }}
      </div>
      <div v-if="isHomeowner" style="width: 30%" flex justify-center>
        <button btn-main @click="onOperate(v.id)">
          操作
        </button>
      </div>
      <!-- 总得分 -->
      <div v-else style="width: 30%" text-score>
        {{ v.score ? v.score : 0 }}
      </div>
    </div>

    <!-- 历史记录 -->
    <div flex m-t-5>
      <div w-90vw py-4 px-4 mx-auto bg-white dark:bg-gray-400 dark:bg-opacity-10 rounded-xl shadow-md space-y-2>
        <div text-center space-y-2>
          <div>
            <div flex justify-between>
              <div text-lg text-left text-black dark:text-white font-semibold mb-2>
                最近三局
              </div>
              <div>
                <SvgIcon name="alldata" w-20px h-20px @click="allGameData()" />
              </div>
            </div>
            <p text-left text-gray-500 dark:text-gray-300 font-medium pb-1>
              Last Three Games
            </p>
          </div>
          <div v-if="dataState.gameList.length !== 0" text-gray-500 dark:text-gray-300 text-center text-4 m-b-2>
            <div v-for="v in dataState.gameList" :key="v.gamesNumber" mb-2>
              <van-row align="center">
                <van-col span="4">
                  <div text-score mt-6px>
                    第{{ v.gamesNumber }}局
                  </div>
                </van-col>
                <van-col span="7">
                  <div flex items-center justify-center>
                    <van-badge mt-6px :content="v.bookmaker === v.playerID ? '庄' : ''">
                      <SvgIcon :name="v.avatarName" w-40px h-40px />
                    </van-badge>
                    <div text-score mt-6px ml-5px>
                      {{ v.nickName }}
                    </div>
                  </div>
                </van-col>
                <van-col span="9">
                  <div>
                    <van-badge :content="v.wins.Gang.length === 0 ? '' : v.wins.Gang.length">
                      <div text-score mt-6px>
                        {{ v.wins.Scoring.join('-') }}
                      </div>
                    </van-badge>
                  </div>
                </van-col>
                <van-col span="4">
                  <div text-score mt-6px>
                    {{ v.score }}
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
          <div>
            <button v-if="isHomeowner" mt-10px btn-main mr-4px @click="onEndGame()">
              结束对局
            </button>

            <button mt-10px btn bg-white ml-4px @click="refreshData()">
              刷新数据
            </button>
          </div>
        </div>
      </div>
    </div>

    <Footer m-auto />
  </div>
  <!-- 对局结束 -->
  <div v-else overflow-y-auto h-screen>
    <div m-y-5 pb-4 w-90vw mx-auto bg-white dark:bg-gray-400 dark:bg-opacity-10 rounded-xl shadow-md space-y-2>
      <div text-center space-y-2 pt-4 px-4>
        <div>
          <div flex justify-between>
            <div text-lg text-left text-black dark:text-white font-semibold mb-2>
              对局结束
            </div>
          </div>
          <p text-left text-gray-500 dark:text-gray-300 font-medium pb-1>
            {{ dataState.roomData.startData }} 开局
          </p>
          <p text-left text-gray-500 dark:text-gray-300 font-medium pb-1>
            {{ roomTextEnd }}
          </p>
        </div>
      </div>

      <van-collapse v-model="dataState.activeNames">
        <van-collapse-item v-for="v in dataState.playerData" :key="v.playerID" :name="v.playerID">
          <template #title>
            <van-row align="center">
              <van-col span="9">
                <div flex items-center justify-around>
                  <SvgIcon :name="v.avatarName" w-40px h-40px />
                  <div text-score mt-6px text-center>
                    {{ v.nickName }}
                  </div>
                </div>
              </van-col>
              <van-col span="9">
                <div>
                  <div text-score mt-6px>
                    {{ v.win ? v.win : 0 }}/{{ v.fail ? v.fail : 0 }}
                  </div>
                </div>
              </van-col>
              <van-col span="4">
                <div text-score mt-6px>
                  {{ v.score }}
                </div>
              </van-col>
            </van-row>
          </template>
          <div flex justify-center items-center flex-wrap>
            <div v-for="(item, itemIndex) in formatResult(v.wins)" :key="itemIndex" mt-1 px-2 py-1 text-sm text-white font-semibold rounded-full border border-blue-200 dark:border-blue-800 dark:bg-warmGray bg-blue-600 focus:outline-none focus:ring-2 ring-blue-600 ring-opacity-40 mr-1>
              {{ item.key }} + {{ item.value }}
            </div>
          </div>
          <div flex justify-center items-center flex-wrap mt-1>
            <div v-for="(item, itemIndex) in formatResult(v.fails)" :key="itemIndex" mt-1 px-2 py-1 text-sm text-white font-semibold rounded-full border border-red-200 dark:border-red-800 dark:bg-warmGray bg-red-500 focus:outline-none focus:ring-2 ring-red-500 ring-opacity-40 mr-1>
              {{ item.key }} + {{ item.value }}
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
      <div mt-5>
        <button mt-10px btn-main mr-4px @click="goBackHome()">
          返回首页
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { closeToast, showConfirmDialog, showLoadingToast, showNotify } from 'vant'
import currency from 'currency.js'
import { classPrivateMethod } from '@babel/types'
import { isDark } from '~/composables'
import { mainStore } from '~/store'

const router = useRouter()
const route = useRoute()

const indexStore = mainStore()
const { roomID } = storeToRefs(indexStore)

const loading = $ref(false)

let unbind = null

const dataState = reactive({
  activeNames: [],
  type: 'ing',
  roomData: {},
  playerData: [],
  gameList: [],
})

const isHomeowner = computed(() => {
  return dataState.roomData.homeownerID === useGetUserID()
})

const roomText = computed(() => {
  // console.log('dataState', dataState.roomData)
  return `第 ${dataState?.roomData?.roundsNumber} 圈 第 ${dataState?.roomData?.gamesNumber + 1} 局 倍率
    ${dataState?.roomData?.multiples}`
})

const roomTextEnd = computed(() => {
  // console.log('dataState', dataState.roomData)
  return `${dataState?.roomData?.roundsNumber} 圈 ${dataState?.roomData?.gamesNumber + 1} 局 倍率
    ${dataState?.roomData?.multiples}`
})

// 格式化赢什么输什么
function formatResult(value) {
  const tempObj = value.reduce((accumulator, currentValue) => {
    // eslint-disable-next-line no-sequences
    return accumulator[currentValue] ? ++accumulator[currentValue] : accumulator[currentValue] = 1, accumulator
  }, {})
  const arr = []
  for (const key in tempObj) {
    if (Object.hasOwnProperty.call(tempObj, key)) {
      const el = tempObj[key]
      arr.push({
        key,
        value: el,
      })
    }
  }
  return arr
}

// 获取room信息
const getRoomInfo = async () => {
  // 加载开始
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0,
  })
  const query = new AV.Query('Rooms')
  query.equalTo('objectId', roomID.value)
  const temp = await query.find()
  const res = temp[0]._serverData
  console.log('res', res)
  if (res.isIng === false)
    dataState.type = 'end'

  dataState.roomData = res
  const tempPlayerData = await useAllUserInfo(dataState.roomData.players)
  tempPlayerData.forEach((el) => {
    el.fail = 0
    el.win = 0
    el.score = 0
    el.wins = []
    el.fails = []
  })
  dataState.playerData = tempPlayerData
  CombinedData()
  // console.log('dataState', dataState)
}

const getGameList = async () => {
  const gameList = await useGetProgressGameList(roomID.value)
  dataState.playerData.forEach((el) => {
    gameList.forEach((item) => {
      const { playerID, fail, win, score, wins, fails } = item._serverData
      if (el.id === playerID) {
        el.fail = currency(el.fail).add(fail).dollars()
        el.win = currency(el.win).add(win).dollars()
        el.score = currency(el.score).add(score).dollars()
        el.wins = el.wins.concat(...wins.Scoring, ...wins.Gang)
        el.fails = el.fails.concat(...fails.Scoring, ...fails.Gang)
      }
    })
  })
  const tempGameList = gameList.map(el => el._serverData)
  const newList = []
  tempGameList.forEach((item) => {
    const newItem = newList.find(i => i.gamesNumber === item.gamesNumber)
    if (!newItem)
      newList.push({ gamesNumber: item.gamesNumber, children: [item] })
    else newItem.children.push(item)
  })
  return newList
}

// 计算胜负
async function CombinedData() {
  const tempList = await getGameList()
  if (tempList.length === 0) {
    closeToast()
    return
  }

  dataState.gameList = []
  for (let i = tempList.length - 1; i >= tempList.length - 3; i--) {
    const el = tempList[i]
    console.log('el', el)
    if (el)
      dataState.gameList.push(el.children.filter(el => el.isWin)[0])
  }
  closeToast()
}

// 监听这条room数据变化
const liveQuery = () => {
  const query = new AV.Query('Rooms')
  query
    .equalTo('objectId', roomID.value)
    .subscribe()
    .then((liveQuery) => {
      console.log('liveQuery订阅成功', liveQuery)
      const upsert = async (res, key) => {
        console.log('liveQuery 数据发生变化', res, key)
        if (key[0] === 'isIng' && res._serverData.isIng === false) {
          dataState.type = 'end'
          unbind()
          return
        }
        getRoomInfo()
      }
      liveQuery.on('update', upsert)
      unbind = () => {
        // 取消订阅
        liveQuery.off('update', upsert)
        liveQuery.unsubscribe().then((res) => {
          console.log('取消订阅成功!', res)
        })
      }
    })
}

// 刷新数据
const refreshData = async () => {
  getRoomInfo()
}

// 操作
const onOperate = (id) => {
  router.push(`/SettleAccounts?winner=${id}`)
}

const allGameData = async () => {
  showNotify({ type: 'success', message: '全部对局数据 开发中...' })
}

// 结束对局
const onEndGame = async () => {
  showConfirmDialog({
    title: '结束对局',
    message: '您是否要结束对局?',
  })
    .then(async () => {
      // 结束把room isIng 改成 false
      // player gameID 清空 isIng 改成 false
      await useUpdateRoomTable(roomID.value, ['isIng'], [false])
      await useUpdateAllUserInfo(dataState.roomData.players)
      dataState.type = 'end'
      unbind()
    })
    .catch(() => {})
}

const goBackHome = () => {
  router.push('/')
}

onMounted(async () => {
  getRoomInfo()
  liveQuery()

  // const tempList = await getGameList()
  // console.log('tempList', tempList)
})
</script>

<style lang="scss" scoped>
:deep(.van-cell) {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  overflow: hidden;
  color: var(--van-cell-text-color);
  font-size: var(--van-cell-font-size);
  line-height: var(--van-cell-line-height);
  background: rgba(255, 255, 255, 0);
}
</style>
